<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/public.css">
		<link rel="stylesheet" href="./css/info.css">
		<title>飞鸟</title>
	</head>
	<body>
		<!-- 头部 -->
		<div class="head w-m clearfix">
			<!-- 已登录 -->
			<div class="logo">
				<img src="./img/flylogo.png" alt="" srcset="">
				<span>飞鸟图库</span>
			</div>
			<div class="info">
				<img src="./img/user.png" alt="">
				<span>尖尖上设计</span>
				<img src="./img/cor.png" alt="" srcset="">
				<span>余额</span>
				<img src="./img/money.png" alt="" srcset="">
				<span>￥52</span>
				<span>在线充值</span>
			</div>
			<!-- 未登录 -->
			<div class="login">
				<span>
					<a href="">登录</a> / <a href="">注册</a>
				</span>
				<span>余额</span>
				<img src="./img/money.png" alt="" srcset="">
				<span>￥0</span>
				<span>在线充值</span>
			</div>
		</div>
		<!-- banner -->
		<div class="banner">
			<div class="user clearfix">
					<div class="uInfo">
							<p>尖尖上设计</p>
							<p>会员用户</p>
						</div>
				<img src="./img/Buser.png" alt="" srcset=""> 
			</div>
		</div>
		<!-- main -->
		<div class="main w-m clearfix">
			<!-- 左侧区域 -->
			<div class="main-l">
				<ul class="side">
					<li class="item active" data-type="0">
						<a href="info.html">
							<img src="img/class2.png">
							<span>个人信息</span>
						</a>
					</li>
					<li class="item" data-type="1">
						<a href="down.html">
							<img src="img/down1.png">
							<span>下载记录</span>
						</a>
					</li>
					<li class="item" data-type="2">
						<a href="rechargeRecord.html">
							<img src="img/book1.png">
							<span>充值记录</span>
						</a>
					</li>
					<li class="item" data-type="3">
						<a href="price.html">
							<img src="img/money1.png">
							<span>价格列表</span>
						</a>
					</li>
					<li class="item" data-type="4">
						<a href="">
							<img src="img/help1.png">
							<span>服务条款</span>
						</a>
					</li>
				</ul>
			</div>
			<!-- 右侧区域 -->
			<div class="main-r">
				<div class="title">个人信息</div>
				<div class="content" id="content">
					<p class="avatar">
						<input type="file" name="" id="upload" value="" />
						<img src="img/Buser.png" >
						<span class="mengban">上传</span>						
					</p>
					<p class="name input clearfix">昵称<input id="name" type="text" name="name" placeholder="请输入昵称" autocomplete="off"/></p>
					<p class="tel input clearfix">手机号<input id="tel" type="tel" name="tel" placeholder="绑定手机号立返5元" autocomplete="off"/></p>
					<p class="input use clearfix">用途
						<input type="radio" name="type" id="person" class="person"><label for="person" class="person">个人</label>
						<input type="radio" name="type" id="company" class="company"><label for="company" class="active">企业</label>
					</p>
					<p class="btn"><input id="btn" type="submit" name="submit" value="保存"/></p>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="foot">
			
			<div class="foot-bottom">
					<a href="">COPYRIGHT (©) 2018 版权所有： 飞鸟图库</a>
			</div>
		</div>
		<script src="./layui/layui.js"></script>
		<script>
			// 校验手机号函数
		function isTelCode(str) {
				var reg= /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
				return reg.test(str);
			}
		// 
		layui.use(['laypage', 'layer','jquery'], function(){
            var laypage = layui.laypage
            ,layer = layui.layer;
			var $ = layui.$;
			// list
			$('.use label').click(function() {
				$(this).addClass('active').siblings().removeClass('active')
			})
			// 信息验证
			$('#name')[0].onblur = function() {
					var namevalue = this.value;
					if(!namevalue){
						layer.tips(
							'<p style="color:#fff;">请输入昵称~~</p>',
							'#name',
							{
								tips: [3, '#0066ff'],
								anim: 6,
								time: 2500,
							}
						);
					}else{
						return true;
					}
				}
			$('#tel')[0].onblur = function() {
					var telvalue = this.value;
					if(!isTelCode(telvalue)){
						layer.tips(
							'<p style="color:#fff;">请输入正确的手机号~~</p>',
							'#tel',
							{
								tips: [3, '#0066ff'],
								anim: 6,
								time: 2500,
							}
						);
					}else{
						return true;
					}
				}
			$("#btn").click(function(){	
				if($('#name')[0].onblur()){
					if($('#tel')[0].onblur()){
						// 
					}
				}					
			}) 
			document.getElementById('content').onkeyup = function (e) {
				var ev = document.all ? window.event : e;
				if (ev.keyCode === 13) {
					$('#btn').click();
				}
			};
			// 
			var arr = [
				{
					img1:'img/class1.png',
					img2:'img/class2.png',
				},
				{
					img1:'img/down1.png',
					img2:'img/down2.png',
				},
				{
					img1:'img/book1.png',
					img2:'img/book2.png',
				},
				{
					img1:'img/money1.png',
					img2:'img/money2.png',
				},
				{
					img1:'img/help1.png',
					img2:'img/help2.png',
				}
			]
			$('.side li').not(".active").hover(function() {
				$(this).addClass('active1');
				$(this).find('img')[0].src = arr[$(this).attr("data-type")].img2;
			}, function() {
				$(this).removeClass('active1');
				$(this).find('img')[0].src = arr[$(this).attr("data-type")].img1;
			})
		})
		</script>
	</body>
</html>
